<template>
	<yb-appear :custom-id="customIdSync" :custom-class="customClassSync" :custom-style="customStyleSync" :disabled="appear" @appear="onAppear" v-if="visible">
		 <view class="yb-notice-bar yb-flex yb-row yb-align-center" :style="{
			'background-color': optionsSync.bgColor
		}">
			 <view style="margin-right: 20rpx;">
				<slot name="icon"><yb-icon v-if="icon" :name="icon" size="40rpx" :color="optionsSync.color"></yb-icon></slot>
			 </view>
			 <swiper circular class="yb-notice-swiper yb-flex-1" vertical :indicator-dots="false" :autoplay="true" :interval="5000" :duration="300" @change="onChange">
				<swiper-item v-for="(item, index) in contentSync" :key="index">
					<view ref="ybNoticeBarContent" class="yb-notice-bar-content yb-flex yb-row yb-align-center">
						<view ref="ybNoticeBarText" :class="textClass" class="yb-notice-bar-text yb-flex" :style="ybNoticeBarTextStyle">
							<yb-text :size="optionsSync.size" :color="optionsSync.color" :value="item"></yb-text>
						</view>
					</view>
				</swiper-item>
			 </swiper>
			 <yb-tap active custom-style="margin-left: 20rpx;" @tap="close" :disabled="!closeable">
				<yb-icon name="fork" size="40rpx" :color="optionsSync.color" v-if="closeable"></yb-icon>
			 </yb-tap>
			 <yb-tap active custom-style="margin-left: 20rpx;" @tap="linkTo" :disabled="!linkable">
				<yb-icon name="angle-arrow-right" size="35rpx" :color="optionsSync.color" v-if="linkable"></yb-icon>
			 </yb-tap>
		 </view>
	</yb-appear>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	// #ifdef APP-NVUE
	const Binding = uni.requireNativePlugin('bindingx');
	// #endif
	export default {
		mixins: [ComponentMixin],
		props: {
			visible: {
				type: Boolean,
				default: true
			},
			content: {
				type: [Array,String],
				default () {
					return new Array();
				}
			},
			scrollable: {
				type: Boolean,
				default: true
			},
			icon: {
				type: [Boolean,String],
				default: 'trumpet'
			},
			closeable: {
				type: Boolean,
				default: false
			},
			linkable: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			optionsSync () {
				return Object.assign({}, {
					color: '#E8AE57',
					bgColor: '#FFFBE8',
					size: '30rpx',
					radius: '5rpx'
				}, this.options)
			},
			contentSync () {
				return Util.typeof(this.content) == 'String' ? [this.content] : this.content
			},
			ybNoticeBarTextStyle () {
				return this.filterStyle(
					{
						// #ifndef APP-NVUE
						'animation-duration': this.animationDuration + 'ms',
						'padding-left': this.scrollable && this.contentSync.length == 1 ? '100%' : 0
						// #endif
					}
				)
			}
		},
		data () {
			return {
				current: 0,
				// #ifndef APP-NVUE
				animationDuration: 0,
				textClass: '',
				// #endif
				appear: false
			}
		},
		beforeDestroy() {
			this.destroy()
		},
		methods: {
			onAppear () {
				if ( !this.appear ) {
					if ( this.contentSync.length > 0 ) {
						this.$nextTick(function () {
							this.scrollbar()
						})
					}
				}
				this.appear = true
			},
			scrollbar () {
				if ( !this.visible || !this.scrollable || this.contentSync.length > 1 || !this.appear ) {
					return
				}
				Util.getRect('.yb-notice-bar-content', Util.getRefs(this, 'ybNoticeBarContent', this.current), this).then(res => {
					Util.getRect('.yb-notice-bar-text', Util.getRefs(this, 'ybNoticeBarText', this.current), this).then(ret => {
						// #ifdef APP-NVUE
						let duration = this.timeCount(res.width, ret.width)
						let text = Util.getEl(this.$refs.ybNoticeBarText[this.current]);
						this.noticebar_binding = Binding.bind({
						    eventType: 'timing',
						    props: [{
						        element: text,
						        property: 'transform.translateX',
						        // expression: `${res.width} + ${-ret.width - res.width}*((t-(floor(t / ${duration}) * ${duration}))/${duration})`
						        expression: `linear(t-(floor(t / ${duration}) * ${duration}), ${res.width}, ${-ret.width - res.width}, ${duration})`
						    }]
						});
						// #endif
						// #ifndef APP-NVUE
						let duration = this.timeCount(res.width, ret.width - res.width)
						this.animationDuration = duration
						this.textClass = 'yb-notice-bar-text-active'
						// #endif
					})
				})
			},
			onChange (e) {
				this.current = e.detail.current
				this.destroy()
				this.scrollbar()
			},
			//计算滚动所需时间
			timeCount  (cWidth, tWidth) {
				let time = 10000;//最低时间10s
				if ( cWidth >= tWidth ) {
					return time;
				} else {
					let speed = cWidth / time;
					let width = tWidth - cWidth;
					let newTime = width / speed;
					return newTime + time;
				}
			},
			close () {
				this.$emit('update:visible', false)
				this.$emit('close')
			},
			linkTo () {
				this.$emit('linkTo', this.current)
			},
			destroy () {
				// #ifndef APP-NVUE
				if ( this.noticebar_timer ) {
					clearTimeout(this.noticebar_timer)
					this.noticebar_timer = null
				}
				// #endif
				// #ifdef APP-NVUE
				if ( this.noticebar_binding ) {
					Binding.unbind({
						token: this.noticebar_binding.token,
						eventType: 'timing'
					})
					this.noticebar_binding = null
				}
				// #endif
			}
		},
		watch: {
			content (newVal) {
				this.destroy()
				this.$nextTick(() => {
					if ( this.contentSync.length > 0 ) {
						this.scrollbar();
					}
				})
			},
			visible (newVal) {
				this.$nextTick(() => {
					if ( newVal && this.contentSync.length > 0 ) {
						this.scrollbar()
					} else {
						this.destroy()
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* #ifndef APP-NVUE */
	@keyframes translateX {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	}
	/* #endif */
	.yb-notice-bar {
		height: 100rpx;
		padding: 0 20rpx;
	}
	.yb-notice-bar .yb-notice-swiper {
		height: 100rpx;
	}
	.yb-notice-bar .yb-notice-bar-content {
		height: 100rpx;
		/* #ifdef MP */
		width: 100%;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	.yb-notice-bar-text-active {
		animation-name: translateX;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-fill-mode: both;
	}
	/* #endif */
</style>